<template>
  <el-dialog class="taskyydialog" v-model="centerDialogVisible" fullscreen :show-close="false">
    <div class="closerank" @click="close">
      <strong></strong>
      <h3>{{ $t("language.task.name") }}</h3>
      <span>
        <el-icon color="#b5b6c8" size="16">
          <CloseBold />
        </el-icon>
      </span>
    </div>
    <div class="task">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane v-for="(item, index) in tablist" :label="$t(item.name)" :name="index">
          <Transition name="fade">
            <component :is="item.component" />
          </Transition>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, shallowRef, defineAsyncComponent } from "vue";
import { CloseBold } from '@element-plus/icons-vue'
let novato = defineAsyncComponent(() => import('./AppNovato.vue'));
let slots = defineAsyncComponent(() => import('./AppSlot.vue'));
let mesa = defineAsyncComponent(() => import('./AppMesa.vue'));
let caca = defineAsyncComponent(() => import('./AppCaCa.vue'));
// import vitaliala from "../components/vitaliala.vue";
let store = useStore()
const centerDialogVisible: any = computed(() => store.task)
const activeName = shallowRef<number>(0);
let close = ():void => {
  store.$patch({ task: false })
};
let tablist = reactive<{name:string,component:any}[]>([
  {
    name: "language.task.tab1",
    component: novato,
  },
  {
    name: "language.task.tab2",
    component: slots,
  },
  {
    name: "language.task.tab3",
    component: mesa,
  },
  {
    name: "language.task.tab4",
    component: caca,
  },
]);
const handleClick = (tab: any, event: Event):void => {
  console.log(tab, event);
};
</script>
<style>
.taskyydialog {
  border-radius: 0;
}
</style>
<style scoped lang="scss">
:deep(.el-tabs__item) {
  color: #b5bac8;
}

:deep(.el-tabs__nav-wrap.is-scrollable) {
  background-color: #141717;
}

:deep(.el-tabs__item.is-active) {
  color: #fff !important;
}

:deep(.el-tabs__active-bar) {
  background: #fff !important;
}

:deep(.el-tabs__nav-wrap::after) {
  background-color: #141717;
}

:deep(.el-tabs__nav-prev) {
  height: 40px;
  line-height: 40px;
}

:deep(.el-tabs__nav-next) {
  height: 40px;
  line-height: 40px;
}

.taskyydialog {
  
  header {
  height: 57px;
  @include flex(row, space-between, center);
  padding: 0 10px;
  background-color: rgb(50, 53, 62);

  div {
    width: 28px;
    height: 28px;
    border-radius: 14px;
  }

  span {
    font-size: 18px;
    color: #b5bac8;
    font-weight: bold;
  }

  .clcire {
    border: 2px solid #b5bac8;
    @include flex(row, center, center);
  }
}

.task {
  width: 100%;
  background-color: rgb(50, 53, 62);
}
}
</style>
